<!DOCTYPE html>
<html lang="en">

<head>
  <title>Captcha_num_reco</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> -->
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <!-- favicon icon -->
  <link rel="shortcut icon" type="image/png" href="favicon.ico" />
  <!-- WEB FONTS -->
  <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet" />
  <!-- Stylesheets -->
  <link rel="stylesheet" href="css/font-awesome.min.css" />
  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/bootstrap-theme.min.css" />
  <!-- color css -->
  <link rel="stylesheet" href="switcher/switcher.css" />
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="css/color.css" />
  <script src="js/modernizr-2.8.3-respond-1.4.2.min.js"></script>
  <!-- upload and preview -->
  <script type="text/javascript" src="js/total.js"></script>



  <script>
    function my_sub() {
      var formdata = new FormData($("#form")[0]);
      $.ajax({
        type: "POST",
        dataType: "json",
        // url: "http://122.19.13.146:8888/icbc/dds/dds_mlp_ocr_wintone_service/api/v1/report",
        url: "http://49.235.222.59:5000/predict",
        contentType: false,
        processData: false,
        data: formdata,
        success: function (result) {
          console.log(result);

          data_show(result);
        },
        error: function () {
          alert("error");
        }
      });
    }

    function data_show(data) {
      var html = data.result
      var res = document.getElementById("new")
      res.innerHTML = html

    }
  </script>

  <style>
    .fakeimg {
      height: 200px;
      background: #aaa;
    }

    .jumbotron {
      margin-bottom: 0px;
      background-image: url(images/slider/abc.jpg);
      background-position: 0% 25%;
      background-size: cover;
      background-repeat: no-repeat;
      color: white;
      text-shadow: black 0.3em 0.3em 0.3em;
    }
  </style>
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="50" style="overflow: visible;">
  <div id="preloader">
    <div id="status"></div>
  </div>
  <header>
    <!--Nav Menu Starts-->
    <nav class="navbar default nav-mob">
      <div class="container mob-logo">
        <div class="navbar-header col-sm-4 tablet-logo">
          <button type="button" class="navbar-toggle mob-menu" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#slides" class="brand-logo">
            <img src="images/icbc.png" alt="karbar logo" />
          </a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav pull-right">
            <li>
              <a href="index.html">首页</a>
            </li>
            <li>
              <a href="Flow_num_reco.html">流水号识别</a>
            </li>
            <li class="active">
              <a href="Captcha_num_reco.html">验证码识别</a>
            </li>
            <li>
              <a href="#karbar-footer-section">联系我们</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <section id="slides" class="pb">
    <div class="slides-container">
      <div class="slide active">
        <div class="img">
          <img src="images/slider/slide1.jpg" alt="slide" class="img-responsive" />
        </div>
        <div class="overlay"></div>
        <div class="slide-caption">
          <div class="container">
            <div class="box">
              <h1>ICBC X-VISION LAB</h1>
              <span>面向所有人的服务平台</span>
            </div>
          </div>
        </div>
      </div>
      <!-- end slide1 -->
      <div class="slide">
        <div class="img">
          <img src="images/slider/slide2.jpg" alt="slide" class="img-responsive" />
        </div>
        <div class="overlay"></div>
        <div class="slide-caption">
          <div class="container">
            <div class="box">
              <h1>验证码识别系统</h1>
              <span>OCR for Captcha Recognition</span>
            </div>
          </div>
        </div>
      </div>
      <!-- end slide2 -->
    </div>
    <!-- end slides-container -->
    <div class="slides-navigation">
      <a class="prev sqaureIconSec" href="#">
        <i class="fa fa-chevron-left"></i></a>
      <a class="next sqaureIconSec" href="#">
        <i class="fa fa-chevron-right"></i></a>
    </div>
    <!-- end slides-navigation -->
    <div class="holder">
      <span class="scroll-btn">
        <a href="#karbar-how-it-works-section">
          <span class="mouse">
            <span> </span>
          </span>
        </a>
      </span>
      <i class="fa fa-chevron-down moreArrow moving"></i>
    </div>
  </section>

  <section id="karbar-service-section">
    <div class="container">
      <div class="row">
        <!-- Section main title -->
        <div class="col-xs-12 section-title-padding">
          <div class="sec-title-container text-center">
            <div class="title-line"></div>
            <h2 class="uppercase font-weight-7 less-mar-1">我们的OCR服务</h2>
            <div class="clearfix"></div>
            <p class="by-sub-title">验证码识别</p>
          </div>
        </div>
        <div class="clearfix"></div>
        <!--end title-->
        <div class="item">
          <div class="col-md-6">
            <div class="service-left-side active reveal-right-delay">
              <h2 class="title">输入</h2>
              <hr>
              <form name="form" id="form" action="" method="post" enctype="multipart/form-data">
                <img id="preview" />
                <br>
                <br>
                <input class="file" name="file" id="file" type="file" onchange="fileSelect(),imgPreview(this)">
                <br>
                <table class="table table-bordered">
                  <tr>
                    <td>
                      <center>文件名</center>
                    </td>
                    <td>
                      <center>文件大小</center>
                    </td>
                    <td>
                      <center>文件类型</center>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <center>
                        <p class="fileName"><br /></p>
                      </center>
                    </td>
                    <td>
                      <center>
                        <p class="fileSize"><br /></p>
                      </center>
                    </td>
                    <td>
                      <center>
                        <p class="fileType"><br /></p>
                      </center>
                    </td>
                  </tr>
                </table>
                <input type="button" value="提交" onclick="my_sub()">
              </form>
            </div>
          </div>
        </div>
        <!--end item-->

        <div class="col-md-6">
          <div class="service-right-side reveal-right-delay">
            <div class="text-box">
              <h2 class="title">输出</h2>
              <hr>
              <p>请耐心等待返回结果</p>
              <br>
              <font size="7" color="black">
                <p class="xvision" id="new"><br><br><br><br><br><br><br></p>
              </font>
            </div>
          </div>
        </div>
        <!--end item-->
      </div>
    </div>

  </section>



  <section id="karbar-footer-section">
    <div class="bottom">
      <div class="row">
        <div class="col-sm-12">
          <div class="subscribe-content">
            <!-- Newsletter title -->
            <div class="subscribe-content-inner">
              <h2>订阅我们</h2>
              <p>
                如果您有任何问题 <br />
                欢迎联系我们！
              </p>
            </div>
          </div>
          <div class="subscribe-form">
            <div class="subscribe-form-inner">
              <!-- Newsletter form -->
              <form class="form-inline dv-form" id="mc-form">
                <div class="form-group">
                  <input id="mc-email" type="email" name="EMAIL" placeholder="Email地址"
                    class="form-control" />
                  <button class="btn btn-24" name="Subscribe" id="subscribe-btn" type="submit">
                    订阅
                  </button>
                </div>
                <br />
                <label for="mc-email"></label>
                <div id="subscribe-result"></div>
              </form>
            </div>
          </div>
          <div class="copyright">
            <p class="copyright">
              Copyright &copy; 2020 .OCR group X-VISION All rights reserved. 冀ICP备20020050号
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- plugin js -->
  <script src="js/plugins.js"></script>
  <!-- super slider -->
  <script type="text/javascript" src="js/jquery.superslides.min.js"></script>
  <!-- contact js -->
  <script src="js/jquery-contact.js"></script>
  <!-- retina js -->
  <script src="js/retina.min.js"></script>
  <!-- mailchimp -->
  <script src="js/jquery.ajaxchimp.min.js"></script>
  <!-- scroll animatin JS -->
  <script src="js/scrollreveal.min.js"></script>
  <script src="js/main.js"></script>
  <!-- color js -->
  <script src="switcher/switcher.js"></script>
</body>

</html>